<template>
    <div class="drawLottery">
      <div class="changeTip"><span>今日您还有 {{residue}}次 抽奖机会</span></div>
      <div class="card">
        <div class="main">
          <div class="left">
            <div class="div">
              <van-swipe :autoplay="autoplayTime" :vertical="true" :show-indicators="false" :touchable="false">
                <van-swipe-item v-for="(i,index) in list1" :key="index">
                  <div class="label" v-show="!show">{{i.score}}</div>
                  <div class="label" v-show="show">{{form.result[0]}}</div>
                </van-swipe-item>
              </van-swipe>
            </div>
            <div class="div">
              <van-swipe :autoplay="autoplayTime" :vertical="true" :show-indicators="false" :touchable="false">
                <van-swipe-item v-for="(i,index) in list2" :key="index">
                  <div class="label" v-show="!show">{{i.score}}</div>
                  <div class="label" v-show="show">{{form.result[1]}}</div>
                </van-swipe-item>
              </van-swipe>
            </div>
            <div class="div">
              <van-swipe :autoplay="autoplayTime" :vertical="true" :show-indicators="false" :touchable="false">
                <van-swipe-item v-for="(i,index) in list3" :key="index">
                  <div class="label" v-show="!show">{{i.score}}</div>
                  <div class="label" v-show="show">{{form.result[2]}}</div>
                </van-swipe-item>
              </van-swipe>
            </div>

          </div>
          <div class="right">
            <img src="@/assets/images/drawLotteryRight.png" alt="">
          </div>
        </div>
      </div>
      <div class="btn" @click="autoplay"><img src="@/assets/images/drawLotteryBtn.png" alt=""></div>
      <div class="tip">
        <p>规则说明</p>
        <p v-html="rule"></p>
      </div>
      <div class="toast" v-show="toastShow">
        <div class="toastSuccess">
          <div class="toastTitle">{{form.win | titleFilter}}</div>
          <div class="toastContent">{{form.desc}}</div>
          <div class="toastBtn" @click="confirm">确定</div>
        </div>
      </div>
    </div>
</template>

<script>
    /**
     *
     * @Author zzl
     * @Date 2019/5/7 16:25.
     */
    import utils from '../../../lib/StringExtend'
    export default {
        mounted() {
          if(utils.isNone(utils.getCookie('wechat_id_'+this.wechatId)) || utils.isNone(utils.getCookie('open_id_'+this.wechatId))) {
            this.getWechat();
          }
          if(!utils.isNone(this.code)&&!utils.isNone(this.appid)) {
            this.userInfo();
          }else {
            this.loadData();
          }
        },
        components: {},
        props: {},
        data() {
            return {
              residue:0,//抽奖次数
              autoplayTime:0, //摇奖速度
              toastShow:false, //弹窗
              show:false,//摇奖结果
              rule:'',  //规则
              list1:[],
              list2:[],
              list3:[],
              form:{
                result:[0,0,0]
              },

              appid: utils.GetQueryString('appid'),
              code: utils.GetQueryString('code'),
              wechatId:utils.getCookie('wechat_id'),
              wechat_id:this.$route.query.wechat_id,//公众号
            }
        },
        computed: {},
        methods: {
          //微信授权
          getWechat(){
            if(utils.isNone(this.wechat_id)){
              return;
            }
            let params = {
              redirect_url: window.location.href,
              wechat_id: this.wechat_id
            };
            utils.setCookie('wechat_id', this.$route.query.wechat_id);
            utils.setCookie('wechat_id_'+this.wechat_id, this.wechat_id);
            this.$axios.wechatWechatOauth(params).then(res=>{
              if(res.errcode !== '000'){
                this.$toast(res.errmsg)
              }
              let url = res.data.url;
              window.location.href = url;
            })
          },
          //获取用户信息
          userInfo(){
            let params = {
              appid: this.appid,
              code: this.code,
            };
            this.$axios.wechatGetWechatUser(params).then(res=>{
              if(res.errcode !== '000'){
                this.$toast(res.errmsg)
              }
              utils.setCookie('open_id_'+this.wechatId, res.data[0].open_id);
              this.loadData();
            })
          },
          loadData(){
            let params = {
              open_id: utils.getCookie('open_id_'+this.wechatId)
            };
            this.$axios.autoWinDrawInfo(params).then(res=>{
              if(res.errcode !== '000'){
                this.$toast(res.errmsg)
              }
              this.list1 = res.data.list_1;
              this.list2 = res.data.list_2;
              this.list3 = res.data.list_3;
              this.residue = res.data.residue;
              var reg = new RegExp(" ","g");
              this.rule = res.data.rule.replace(reg,'<br>');
            })
          },
          //开始抽奖
          autoplay(){
            if(this.autoplayTime >0){
              return;
            }
            if(this.residue == '0'){
              this.$toast('今日次数已用完，请明日再来哦～');
              return
            }
            let params = {
              open_id: utils.getCookie('open_id_'+this.wechatId)
            };
            this.$axios.autoWinClickBegin(params).then(res=>{
              if(res.errcode !== '000'){
                this.$toast(res.errmsg);
                return;
              }
              this.residue = res.data.residue;
              this.form = res.data;
              this.autoplayTime = 50;
              this.show = false;
              setTimeout(()=> {
                this.autoplayTime = 0;
                this.show = true;
                setTimeout(()=> {
                  this.toastShow = true;
                },200)
              },3000)
            });

          },
          confirm(){
            this.toastShow = false;
          }
        },
        watch: {},
        filters: {
          titleFilter(val){
            switch (val) {
              case 0:
                return '很遗憾';break;
              case 1:
                return '恭喜您';break;
              default:
                return '';break;
            }
          }
        },
        beforeDestroy() {

        }
    }
</script>
<style lang="less" scoped>
  .drawLottery{
    width: 100%;
    height: 100%;
    background: url("../../../assets/images/drawLotteryBg.png") no-repeat;
    background-size: 100% 100%;
    text-align: center;
    .changeTip{
      width: 100%;
      padding-top: 2.2rem;
      text-align: center;
      box-sizing: border-box;
      span{
        color: #ffffff;
        border: solid 1px #ffffff;
        font-size: 0.25rem;
        border-radius: 0.17rem;
        height: 0.34rem;
        line-height: 0.34rem;
        padding: 0.04rem 0.1rem;
      }
    }
    .card{
      margin-top: 0.38rem;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      .main{
        display: flex;
        flex-direction: row;
      }
      .left{
        width: 6.07rem;
        height: 3rem;
        background: url("../../../assets/images/drawLotteryLeft.png") no-repeat;
        background-size: 100% 100%;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding: 0.4rem;
        box-sizing: border-box;
        .div{
          width: 1.7rem;
          height:2.15rem;
          overflow: hidden;
          background: url("../../../assets/images/rotatingLayer.png") no-repeat;
          background-size:100% 100%;
          display: flex;
          align-items: center;
          .van-swipe{
            width: 100%;
            height: 80%;
          }
          .van-swipe-item{
            display: flex;
            align-items: center;
            justify-content: center;
          }
          .label{
            width: 1.35rem;
            height: .66rem;
            line-height: .66rem;
            color: white;
            font-size: 0.24rem;
            border-radius: 0.1rem;
            background-image: linear-gradient(126deg,
            #f67e6e 0%,
            #f45540 100%),
            linear-gradient(
              #f0073c,
              #f0073c);
            background-blend-mode: normal,
            normal;
          }
        }
      }
      .right{
        width: 0.95rem;
        height: 3rem;
        display: flex;
        align-items: center;
        img{
          width: 100%;
          height: auto;
          margin: auto 0;
        }
      }
      .li{
        width: 30%;
        height: 100%;
      }
    }
    .btn{
      width: 1.8rem;
      height: 0.98rem;
      margin: 0.74rem auto;
      img{
        width: 100%;
        height: 100%;
      }
    }
    .tip{
      width: 80%;
      margin: 0 auto;
      text-align: left;
      color: white;
      font-size: 0.24rem;
      p:first-child{
        font-size: 0.3rem;
        line-height: 0.6rem;
      }
    }
    .toast{
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      bottom: 0;
      background: rgba(0,0,0,0.7);
      .toastSuccess{
        width: 5.4rem;
        height: 4.6rem;
        position: absolute;
        top: calc(32% - 2.1rem);
        left: calc(50% - 2.7rem);
        background: url("../../../assets/images/toast_success.png") no-repeat;
        background-size: 100% 100%;
        .toastTitle{
          position: absolute;
          top: 0.2rem;
          width: 80%;
          height: 1rem;
          text-align: center;
          left: 10%;
          line-height: 1rem;
          color: #dc5043;
        }
        .toastContent{
          position: absolute;
          top: 1.6rem;
          width: 80%;
          height: 1rem;
          text-align: center;
          left: 10%;
          line-height: 1rem;
          color: #dc5043;
          font-weight: 700;
          font-size: 0.6rem;
        }
        .toastBtn{
          position: absolute;
          bottom: 0.5rem;
          width: 80%;
          height: 1.1rem;
          text-align: center;
          left: 10%;
          line-height: 1.1rem;
          color: #dc5043;
        }
      }
    }
  }
</style>
